<!-- 跳转到的页面-----02 -->

<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <img src="../../../src/assets/orange@3x.png" alt="" class="tonimg" />
        <!-- 用element写一个侧边栏 -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>基础设置</span>
            </template>
            <el-menu-item index="/menu">网站管理</el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>权限设置</span>
            </template>
            <el-menu-item index="/menu">菜单管理</el-menu-item>
            <el-menu-item index="/user">角色管理</el-menu-item>
            <el-menu-item index="/role">用户管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 顶部导航栏 -->

          <!-- 写一个退出按钮点击跳到登录界面 -->
          <el-button type="text" @click="open" class="rbutton">退出</el-button>
        </el-header>
        <el-main>
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/about' }" replace
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 内容显示到这里 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      list: [],
    };
  },
  methods: {
    // 退出按钮

    open() {
      this.$confirm(
        "确认此操作吗？？？？？？？？？？？？？？？？？？？?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "我先润了!",
          });
          this.$router.push("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "先不退出莫慌",
          });
        });
    },
  },
  created() {
    // this.list = localStorage.getItem("userInfo");
    console.log(this.list);
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style scopend lang="scss">
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
  background: linear-gradient(to bottom, #ff6040, #ff8a80);
}
.el-submenu__title {
  color: #fff;
  background: linear-gradient(to bottom, #ff6040, #ff8a80);
}

a {
  color: #fff;
}

.dropdown {
  line-height: 60px;
  font-size: 20px;
  //  间距
  margin-right: 20px;

  color: red;
}
.rbutton {
  float: right;

  font-size: 20px;
  color: #fff;
  background-color: #4d90fe;
  padding: 10px;
}
.el-menu-vertical-demo {
  // 占满当前高度
  height: 800px;
}
.tonimg {
  width: 90%;
}

.el-header,
.el-footer {
  background-color: #ffb6a7;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #ff6e55;
  color: #333;
  text-align: center;
  padding-top: 10px;
  height: 100vh;
}

.el-main {
  background-color: #ffb;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
